import { GlobalContext } from '@/context';
import cs from 'classnames';
import React, { useContext } from 'react';

import styles from './style/index.module.less';

import Logo from '@/assets/login-header-logo.svg';
import Lang from '@/assets/lang.png';
import useLocale from '@/utils/useLocale';
import locale from './locale';

export default function Header() {
  const { setLang, lang, rtl } = useContext(GlobalContext);
  const t = useLocale(locale);

  return (
    <header className={cs(styles['header'])}>
      <div className={cs(styles['header-container'])}>
        <Logo />
        <div
          className={cs(styles['header-lang'])}
          onClick={() => {
            setLang(lang == 'en-US' ? 'ar-EG' : 'en-US');
          }}
        >
          <div className={cs(styles['text'], rtl ? 'ltr' : 'rtl')}>
            {t['header-lang']}
          </div>
          <img className={styles['img']} src={Lang} />
        </div>
      </div>
    </header>
  );
}
